<template>
  <div>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item[matchField])">
        <span v-if="!item.bgColor" :key="item[matchField]" :index="index">
          {{ item.lookupName }}
        </span>
        <span v-else :key="item[matchField] + 1">
          <a-tag v-if="showMode === 'tag'" v-bind="$attrs" :index="index" :color="item.bgColor">
            {{ item.lookupName }}
          </a-tag>
          <span v-else-if="showMode === 'txt'" :style="{ color: item.bgColor }">
            {{ item.lookupName }}
          </span>
        </span>
      </template>
    </template>
  </div>
</template>
<script lang="ts" setup>
interface LookupData {
  lookupName: string;
  lookupCode: string;
  bgColor: string;
}
const props = defineProps({
  /** 数据字典集合 */
  options: { type: Object as PropType<Array<LookupData>>, default: null },
  /**
   * 如果value传入通用代码转换后的中文则该参数默认为lookupName
   * 如果value传入通用代码未转换的（数字或英文）该参数需要传入lookupCode
   */
  matchField: { type: String as PropType<'lookupName' | 'lookupCode'>, default: 'lookupName' },
  /** 双向绑定数据 */
  value: { type: String, default: '' },
  /** 显示方式tab表示默认使用tag显示，txt表示使用span显示 */
  showMode: { type: String, default: 'tag' }
});
const values = computed(() => {
  if (props.value !== null && typeof props.value !== 'undefined') {
    if (props.value.includes(',')) {
      return props.value.split(',');
    }
    if (props.value.includes(';')) {
      return props.value.split(';');
    }
    return Array.isArray(props.value) ? props.value : [String(props.value)];
  }
  return [];
});
</script>
<style scoped>
.a-tag + .a-tag {
  margin-left: 10px;
}
</style>
